import React, {PureComponent} from 'react'
// 引入 ECharts 主模块
import echarts from 'echarts';
import {setTitle, scale, tooltip, mapLineStyle, mapEffectStyle, baseTextStyle} from '../chart/util/common'
import baseChart from '../chart/base-chart'

class Bar extends PureComponent {
    constructor() {
        super()
    }

    shouldComponentUpdate(nextProps) {
        const {config} = nextProps
        let update = false
        config.yAxisData.forEach((t, i) => {
            if (t.data.length !== this.props.config.yAxisData[i].data.length) {
                update = true
            }
        })
        return update
    }

    renderData = (props) => {
        const {config, setChartInstance} = props
        return {
            title: setTitle({text: config.title}),
            // legend: {
            //     data: config.yAxisData.map(yAxis => yAxis.name)
            // },
            xAxis: {
                data: config.xAxisData
            },
            legend: {
                data: config.legend
            },
            series: config.yAxisData.map(yAxis => {
                return {
                    type: 'line',
                    symbolSize: 4 * scale,
                    lineStyle: {
                        normal: {
                            width: 2 * scale
                        }
                    },
                    symbol: 'circle',
                    ...yAxis

                }
            }),
        }
    }

    componentWillUpdate(nextProps) {
        const {config, setChartInstance} = nextProps
        this.myChart.setOption(this.renderData(nextProps));
        config.option && this.myChart.setOption(config.option);
    }

    componentDidMount() {
        const {config, setChartInstance} = this.props
        this.myChart = setChartInstance(echarts.init(this.refs.chart));

        const option = {
            title: {
                ...setTitle({text: ''}),
                textStyle: {
                    color: '#5BE2EF',
                    fontSize: 14 * scale,
                    fontWeight: 'bolder'
                }
            },
            color: ['rgba(184, 23, 218, 1)', 'rgba(2,160,171,.5)'],
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: [],
                bottom: 10 * scale,
                itemWidth: 25 * scale,
                itemHeight: 12 * scale,
                textStyle: {
                    color: '#fff',
                    fontSize: 12 * scale
                }

            },
            grid: {
                left: '5%',
                right: '5%',
                top: 40 * scale,
                bottom: 34 * scale,
                containLabel: true
            },
            toolbox: {
                "show": false,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                axisTick: {
                    "show": false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999',
                        fontSize: 12 * scale
                    }
                },
                boundaryGap: false,
                data: []
            },
            yAxis: {
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)',
                        width: scale
                    }
                },
                axisTick: {
                    "show": false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999',
                        fontSize: 12 * scale
                    }
                },
                type: 'value'
            },
            series: []
        }
        this.myChart.setOption(option);
        this.myChart.setOption(this.renderData(this.props));

        // this.myChart.setOption({
        //     title: setTitle({text: config.title}),
        //     // legend: {
        //     //     data: config.yAxisData.map(yAxis => yAxis.name)
        //     // },
        //     xAxis: {
        //         data: config.xAxisData
        //     },
        //     series: config.yAxisData.map(yAxis => {
        //         return {
        //             type: 'line',
        //             symbolSize: 4 * scale,
        //             lineStyle: {
        //                 normal: {
        //                     width: 2 * scale
        //                 }
        //             },
        //             symbol: 'circle',
        //             areaStyle: {
        //                 normal: {
        //                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //                         offset: 0,
        //                         color: 'rgba(184, 23, 218, 0.6)'
        //                     }, {
        //                         offset: 0.8,
        //                         color: 'rgba(184, 23, 218, .1)'
        //                     }], false),
        //                     shadowColor: 'rgba(0, 0, 0, 0.1)',
        //                     shadowBlur: 10
        //                 }
        //             },
        //             ...yAxis,
        //         }
        //     }),
        // });
        config.option && this.myChart.setOption(config.option);
    }

    render() {

        return (
            <div ref="chart" style={{width: '100%', height: '100%'}}/>
        )
    }

}

export default baseChart(Bar)